<template>
  <div class="share-container">
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <el-icon class="el-icon-arrow-left"></el-icon>
    </div>
    
    <!-- 热度部分 -->
    <div class="hotness">
      <el-icon class="hotness-icon el-icon-hot-water"></el-icon>
      <div class="hotness-value">{{follower}}</div>
    </div>
    
    <!-- 对话气泡图标 -->
    <el-icon class="chat-icon el-icon-chat-dot-round"></el-icon>
    
    <!-- 消息数量 -->
    <div class="message-count">{{totalComment}}</div>
    
    <!-- 分享标题 -->
    <div class="share-title">分享至</div>
    
    <!-- 分享图标 - 竖向排列 -->
    <div class="share-icons">
      <div class="share-icon icon-green">
        <i class="icon-content el-icon-share"></i>
      </div>
      <div class="share-icon icon-red">
        <i class="icon-content el-icon-link"></i>
      </div>
      <div class="share-icon icon-yellow">
        <i class="icon-content el-icon-star-on"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PostTop",
  components: {},
  props: {
    follower: {
      type: [String, Number], // 根据你的数据类型选择
      default: '' // 可以设置默认值
    },
    totalComment: {
      type: [String, Number], // 根据你的数据类型选择
      default: '' // 可以设置默认值
    },
  },
  methods: {
    goBack() {
      console.log("111");
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.share-container {
  width: 120px;
  /* margin-right: 30px; */
  background-color: white;
  /* border-radius: 4px; */
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.el-icon-arrow-left {
    font-weight: 600;
}
.back-button {
  cursor: pointer;
  font-size: 24px;
  color: #606266;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
  margin-top: 10px;
}
.back-button:hover {
  background-color: #f5f5f5;
}
.hotness {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.hotness-icon {
  font-size: 32px;
  color: #ff4d4f;
}
.hotness-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
}
.message-count {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
}
.share-title {
  font-size: 16px;
  color: #606266;
}
.share-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.share-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s;
}
.share-icon:hover {
  transform: scale(1.1);
}
.icon-green {
  background-color: #67C23A;
}
.icon-red {
  background-color: #F56C6C;
}
.icon-yellow {
  background-color: #E6A23C;
}
.icon-content {
  font-size: 18px;
  color: white;
}
.chat-icon {
  font-size: 30px;
  color: #909399;
}
</style>